数据可视化技术HighCharts应用开发教程(一)--------下载与安装

发表于 | 分类于 ， ， | 评论数：
数据可视化技术之Highcharts应用开发简单教程

前言

​ 本次教程其实就是一个学习过程的记录，小白进阶，写出来供大家参考，大神勿喷，哈哈！

HighCharts介绍

​ Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。

​ 本教程只针对Highcharts，Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。它支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图，主要用于数据可视化。

下载

下载地址

​ 因为Hightcharts官网提供的CDN服务与hexo提供的类似，并不是所有时间访问速度都很快，相对本地文件来说稳定性较差。所以本次教程提供下载地址Hightcharts，点击下载最新版本解压即可。

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|-- code               所有 js 文件及源代码
|-- css            			  Highcharts css 文件（只用于 CSS 版本 Highcharts） 
    |-- lib           			  相关的库文件
    |-- es-modules     			  功能模块文件目录
    |-- themes        			  主题文件目录
    |-- highcharts.js              highcharts 主文件
    |-- highcharts.src.js          highcharts 主文件源码
    |-- highcharts-3d.js           highcharts 3d 功能文件
    |-- highcharts-3d.src.js       highcharts 3d 功能文件源码
    |-- highcharts-more.js         highcharts 增加功能文件
    |-- highcharts-more.src.js     highcharts 增加功能文件源码
    |-- readme.txt                 源代码目录说明文件
|-- examples           例子
|-- gfx                例子用到的图片资源
|-- graphics           例子用到的图片资源 
|-- index.htm          例子入口文件 
|-- license.pdf        使用协议文档
|-- readme.txt         说明文件

简单用法

​ 将对应css以及js文件复制到对应web项目中引入即可使用。如：

1
<script src="js/highcharts.js" type="text/javascript"></script>